<template>
    <div class="content">
        <van-row>
            <van-col span="3">
                <van-icon name="bars" color="#ff6900" size="40px" />
            </van-col>
            <van-col span="18">
                <van-search v-model="value" background="#dfe1e1" placeholder="请输入搜索关键词" />
            </van-col>
            <van-col span="3">
                <van-icon name="friends-o" size="40px" />
            </van-col>
        </van-row>
        <van-tabs v-model:active="actives" animated background="#dfe1e1">
            <van-tab v-for="(item, index) in tabdata" :key="index" :title="item.name">
                <!-- 内容{{ index,actives }} -->
                <!-- <div v-if="index === 0">
                    <Tjmove></Tjmove> 
                </div>
                <div v-else-if="index === 1">
                    智能
                </div> -->
            </van-tab>
        </van-tabs>

        <div class="content-container">
            <component :is="currentComponent" /> <!-- 动态组件示例 -->
        </div>
    </div>


    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster" url="https://m.mi.com/category">分类</van-tabbar-item>
        <van-tabbar-item icon="wechat-moments" url="https://chat.deepseek.com/">米圈</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager">我的</van-tabbar-item>
    </van-tabbar>

</template>

<script setup>

import { computed, ref } from 'vue'
const active = ref(0)
import axios from 'axios';
import { onMounted } from 'vue';
const tabdata = ref([])
const actives = ref(0)
import Tjmove from '../tabs/Tjmove.vue';
import Login from '../Login.vue';
//组件的数组 为后面数据做动态渲染
const components = ref([Tjmove, Login])
/**
 * tabaledata:[{ name:'智能',component:Tjmove }]
 * 
 */
//渲染数据 页面加载 数据立即渲染
onMounted(() => { 
    midataApi()
})
const midataApi =async () => { 
  
   await axios.get('https://apis.netstart.cn/xmsc/home/page').then(res => { 
        console.log(res);
       tabdata.value = res.data.data.tabs;
    })
}
// 计算属性
const currentComponent = computed(() => { 
    return components.value[actives.value]
})

</script>

<style scoped>
.content{
    height: 100%;
    background-color: rgb(223, 225, 225);
}
.van-icon{
    margin-left: 10px;
    margin-top: 10px;
}
:deep(.van-search__content){
    height: 40px !important;
    :deep(.van-cell) {
            line-height: 40px !important;
        }
}
:deep(.van-tab){
    --van-tab-font-size: 20px;
}
:deep(.van-tabbar-item__icon){
    font-size: 28px;
}
</style>